<template>
  <div class="report-list">
    <div class="rl-content white-card">
      <div class="search-box" ref="searchBar">
        <el-form
          :model="form"
          ref="form"
          size="medium"
          label-width="70px"
          class="demo-form"
        >
          <el-row>
            <!-- <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="项目名称" prop="cardName">
                <el-input
                  placeholder="请输入项目名称"
                  v-model="form.cardName"
                  clearable
                  @clear="handleSearch"
                  @keyup.enter.native="handleSearch"
                ></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="项目名称" prop="cardName">
                <el-select
                  style="width: 100%"
                  v-model="form.cardName"
                  placeholder="请选择项目名称"
                  filterable
                  clearable
                  @change="handleSearch"
                >
                  <el-option
                    v-for="item in cardTypeList"
                    :key="item.value"
                    :label="item.cardName"
                    :value="item.cardName"
                    @change="handleSearch"
                  >
                    <span>{{ item.cardName }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="客户单位" prop="appName">
                <!-- <el-input
                  placeholder="请输入客户单位"
                  v-model="form.appName"
                  clearable
                  @clear="handleSearch"
                  @keyup.enter.native="handleSearch"
                ></el-input> -->
                <el-select
                  style="width: 100%"
                  v-model="form.appName"
                  placeholder="请选择客户单位"
                  filterable
                  clearable
                  @change="handleSearch"
                >
                  <el-option
                    v-for="item in appList"
                    :key="item.appId"
                    :label="item.appName"
                    :value="item.appName"
                    @change="handleSearch"
                  >
                    <span>{{ item.appName }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="销售" prop="adminName">
                <el-input
                  placeholder="请输入销售人员名称"
                  v-model="form.adminName"
                  clearable
                  @clear="handleSearch"
                  @keyup.enter.native="handleSearch"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="权益" prop="rightId">
                <el-select
                  style="width: 100%"
                  v-model="form.rightId"
                  placeholder="请选择权益"
                  clearable
                  @change="handleSearch"
                >
                  <el-option
                    v-for="item in rightList"
                    :key="item.value"
                    :label="item.rightName"
                    :value="item.rightId"
                    @change="handleSearch"
                  >
                    <span>{{ item.rightName }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label-width="20px">
                <el-button type="primary" size="small" @click="handleSearch"
                  >筛选</el-button
                >
                <el-button @click="handleReset">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="white-card table-wrap">
        <div class="btn-bar">
          <el-button
            v-has="'add'"
            type="primary"
            plain
            size="small"
            @click="handleNewProject"
            >新增项目</el-button
          >
        </div>
        <div :style="{ height: tableHeight + 'px' }">
          <el-table
            :data="list"
            height="100%"
            v-loading="loading"
            highlight-current-row
            tooltip-effect="light"
            :cell-style="cell"
            :header-cell-class-name="'header_name_style'"
          >
            <el-table-column
              prop="cardType"
              width="100"
              align="center"
              label="项目ID"
            >
            </el-table-column>
            <el-table-column
              prop="cardName"
              :show-overflow-tooltip="true"
              label="项目名称"
              min-width="100"
            >
            </el-table-column>
            <el-table-column
              prop="appName"
              :show-overflow-tooltip="true"
              label="客户单位"
              min-width="100"
            >
            </el-table-column>
            <el-table-column label="申请权益" min-width="100">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="handleViewRightsAndPrice(scope.row)"
                  >查看详情</el-button
                >
              </template>
            </el-table-column>
            <!-- <el-table-column label="权益" min-width="80">
              <template
                slot-scope="scope"
                v-if="
                  Array.isArray(scope.row.rightList) &&
                  scope.row.rightList.length
                "
              >
                <el-popover
                  placement="top-start"
                  title=""
                  popper-class="el-popover-self"
                  trigger="hover"
                >
                  <div class="list-box">
                    <div
                      class="item"
                      v-for="(item, index) in scope.row.rightList"
                      :key="index"
                    >
                      <span class="name">{{ item.rightName }}</span>
                    </div>
                  </div>
                  <div slot="reference" class="currentName-3">
                    <span class="name pointer">
                      {{ scope.row.rightList[0].rightName }}
                      <span v-if="scope.row.rightList.length > 1">...</span>
                    </span>
                  </div>
                </el-popover>
              </template>
            </el-table-column> -->
            <el-table-column
              min-width="80"
              :show-overflow-tooltip="true"
              prop="createTime"
              label="销售"
            >
              <template
                v-if="
                  Array.isArray(scope.row.adminRels) &&
                  scope.row.adminRels.length
                "
                slot-scope="scope"
              >
                <el-popover
                  placement="top-start"
                  title=""
                  popper-class="el-popover-self"
                  trigger="hover"
                >
                  <div class="list-box">
                    <div
                      class="item"
                      v-for="(item, index) in scope.row.adminRels"
                      :key="index"
                    >
                      <span class="name">{{ item.adminName }}</span>
                    </div>
                  </div>
                  <div slot="reference" class="currentName-3">
                    <span>
                      {{ scope.row.adminRels[0].adminName }}
                      <span v-if="scope.row.adminRels.length > 1"
                        >...</span
                      ></span
                    >
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              min-width="140"
              :show-overflow-tooltip="true"
              prop="createTime"
              label="建立时间"
            >
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="190">
              <template slot-scope="scope">
                <div class="operation-button">
                  <el-button
                    v-has="'projectDetail'"
                    type="text"
                    @click="handleEditPro(scope.row)"
                    >详情</el-button
                  >
                  <el-button
                    v-has="'delete'"
                    type="text"
                    @click="handleDeleteProject(scope.row)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pager" v-if="list.length > 0">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.currentPage"
            :page-sizes="page.pageSizes"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.sums"
            background
          ></el-pagination>
        </div>
      </div>
    </div>
    <AddProjectDialog
      :visible.sync="addProjectVisible"
      :projectInfo="selectedRow"
      :showPerson="true"
      @confirm="handleConfirmAddPro"
    ></AddProjectDialog>
    <RightTreeDialog
      :cardType="currentCardType"
      :visible.sync="rightTreeVisible"
    ></RightTreeDialog>
  </div>
</template>

<script>
import {
  rightsList,
  cardTypes,
  applicationList,
  addNewProject,
  updateProject,
  removeProject,
  getProjectList,
} from "@/api/index";
import page from "@/mixin/page";
export default {
  components: {
    AddProjectDialog: () => import("@/components/AddProjectDialog"),
    RightTreeDialog: () => import("../components/RightTreeDialog.vue"),
  },
  mixins: [page],
  data() {
    return {
      loading: false,
      addProjectVisible: false,
      rightTreeVisible: false,
      list: [],
      tableHeight: "auto",
      form: {
        cardName: "",
        appName: "",
        adminName: "",
        rightId: "",
      },
      appList: [],
      localAppList: [],
      rightList: [],
      cardTypeList: [],
      selectedRow: null,
      currentSelectApp: null,
      currentSelectPro: null,
      currentCardType: "",
    };
  },
  computed: {},
  async created() {
    this.getData();
    this.rightsListFn();
    this.applicationListFn();
    this.getProjectListFn();
  },
  mounted() {
    this.getHeight();
  },
  destroyed() {
    window.removeEventListener("resize", this.getHeight);
  },
  methods: {
    getProjectListFn() {
      getProjectList().then((res) => {
        if (res.code == 200) {
          this.cardTypeList = res.data;
        }
      });
    },
    handleViewRightsAndPrice(row) {
      this.currentCardType = row.cardType;
      this.rightTreeVisible = true;
    },
    handleDeleteProject(val) {
      this.$confirm("此操作将永久删除该项目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const params = {
            cardType: val.cardType,
          };
          this.removeProjectFn(params);
        })
        .catch(() => {});
    },
    removeProjectFn(params) {
      removeProject(params)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("项目删除成功！");
            this.getData();
          } else {
            this.$message.error(res.status_desc);
          }
        })
        .catch((err) => {
          this.$message.error(err.status_desc);
        });
    },
    getHeight() {
      this.tableHeight =
        window.innerHeight - this.$refs.searchBar.offsetHeight - 210;
    },
    handleConfirmAddPro(val) {
      const params = { ...val };
      params.appId = val.appId ? val.appId : 0;
      params.appName = val.appName;
      params.cardTypeName = val.cardTypeName;
      params.cardName = val.cardTypeName;
      this.addProjectVisible = false;
      params.cardVersion = val.cardVersion;
      // const temp = [];
      // val.rightList.forEach((item) => {
      //   temp.push({
      //     rightId: item,
      //   });
      // });
      params.rightList = val.selectedRightList;
      delete params.selectedRightList;
      let fn = this.selectedRow ? updateProject : addNewProject;
      if (this.selectedRow) {
        params.cardType = val.cardType;
      } else {
        delete params.cardType;
      }
      fn(params)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success(
              this.selectedRow ? "项目修改成功" : "项目新增成功"
            );
            this.getData();
          } else {
            this.$message.error(res.status_desc);
          }
        })
        .catch((err) => {
          this.$message.error(err.status_desc);
        });
    },
    handleNewProject() {
      this.selectedRow = null;
      this.addProjectVisible = true;
    },
    applicationListFn() {
      applicationList()
        .then((res) => {
          if (res.code == 200) {
            this.appList = res.data;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getAdminName(list) {
      const temp = [];
      list.forEach((item) => {
        temp.push(item.adminName);
      });
      return temp.join("，");
    },
    rightsListFn() {
      rightsList().then((res) => {
        if (res.code == 200) {
          this.rightList = res.data;
        }
      });
    },
    cell({ row, column, rowIndex, columnIndex }) {
      if (
        columnIndex === 2 ||
        columnIndex === 3 ||
        columnIndex === 5 ||
        columnIndex === 7 ||
        columnIndex === 8 ||
        columnIndex === 9 ||
        columnIndex === 10
      ) {
        return "font-size: 14px;font-family: PingFangSC, PingFang SC;font-weight: 400;color: #333333;";
      }
      if (columnIndex === 4) {
        return "font-size: 14px;font-family: PingFangSC, PingFang SC;font-weight: 400;color: #333333;";
      }
    },
    cancel() {
      this.personSelectVisible = false;
    },
    handleEditPro(row) {
      this.selectedRow = row;
      this.addProjectVisible = true;
    },
    getData() {
      this.loading = true;
      let params = {
        ...this.form,
        pageNo: this.page.currentPage,
        pageSize: this.page.pageSize,
      };
      cardTypes(params)
        .then((res) => {
          if (res.code == 200) {
            this.list = res.data;
            this.page.sums = res.pageparam.sums;
          } else {
            this.list = [];
            this.loading = false;
            this.$message.error(res.status_desc);
          }
        })
        .catch((err) => {
          this.list = [];
          this.loading = false;
          this.$message.error(err.message);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    async handleSearch() {
      this.$set(this.page, "currentPage", 1);
      this.getData();
    },
    handleReset() {
      this.form.cardName = "";
      this.form.appName = "";
      this.form.adminName = "";
      this.form.rightId = "";
      this.handleSearch();
    },
  },
};
</script>

<style>
.el-popover.el-popper.el-popover-self {
  min-width: 20px !important;
}
</style>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 0;
}
.white-card {
  .btn-bar {
    margin-bottom: 12px;
  }
}
.report-list {
  background: url("../../../assets/images/bigBg.png") no-repeat;
  background-position: center;
  background-size: 100% 100%;
  .rl-content {
    margin: 12px 12px 0 12px;
    .search-box {
      padding: 22px 24px 0 12px;
      border-bottom: 1px solid #e8e8e8;
    }
    .table-wrap {
      box-shadow: 0 0 0 0;
      overflow: hidden;
      .operate-bar {
        display: flex;
        /deep/ .el-button--small.is-round {
          font-size: 14px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #555555;
        }
      }

      .currentName-1 {
        color: #ba4bee;
      }

      .currentName-2 {
        color: #999999;
      }

      .currentName-3 {
        color: #666;

        .name {
          color: #6a4aff;
          padding-left: 4px;
          font-weight: 400;
        }
      }

      .currentName-4 {
        color: #0cb354;
      }

      .operation-button {
        /deep/ .el-button--text {
          font-weight: 400;
        }
      }
    }
    .pointer {
      cursor: pointer;
    }
  }
}

.list-box {
  .item {
    display: flex;
    justify-content: space-between;
    color: #999;
    padding: 2px 0;

    .isActive {
      color: #1890ff;
    }
    .finish-type {
      margin-left: 5px;
    }
    .unfinishColor {
      color: #999999;
    }
    .doingColor {
      color: #ff4a4a;
    }
    .finishColor {
      color: #000000;
    }
  }
}

/deep/ .el-col-12 {
  width: 25%;
}

/deep/ .el-range-editor--small .el-range-separator {
  line-height: 24px;
  font-size: 13px;
  width: 25px;
}
/deep/ .header_name_style {
  font-size: 14px;
  font-family: PingFang-SC, PingFang-SC;
  font-weight: bold;
  color: #6c7481;
}
</style>
